<template>
  <div>
    <div class="content">
      <div class="form-box">
        <div class="form-title">投票管理系统登录平台</div>
        <el-form
          ref="ruleFormRef"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :model="ruleForm.user"
        >
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="ruleForm.user.username" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              v-model="ruleForm.user.password"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <div class="button">
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm"
                :loading-icon="Eleme"
                :loading="lod"
                >登录
              </el-button>
              <el-button @click="regisVisible = true">注册</el-button>
            </el-form-item>
          </div>
        </el-form>
        <el-dialog v-model="regisVisible" title="注册" width="30%">
          <el-form
            ref="ruleFormRef"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :model="ruleForm.user"
          >
            <el-form-item label="用户名:" prop="username">
              <el-input v-model="ruleForm.user.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input
                v-model="ruleForm.user.password"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click=""
                :loading-icon="Eleme"
                :loading="lod"
                >注册
              </el-button>
              <el-button
                type="primary"
                @click="regisVisible = false"
                :loading-icon="Eleme"
                :loading="lod"
                >取消
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { routerKey, useRouter } from "vue-router";
import { Eleme } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const regisVisible = ref(false);
const router = useRouter();
const ruleForm = reactive({
  user: {
    username: "",
    password: "",
  },
});
const lod = ref(false);
const ruleFormRef = ref();
const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const submitForm = () => {
  ruleFormRef.value.validate(valid =>{
    console.log(valid);
  })

  ruleFormRef.value.validate((valid) => {
    console.log(valid);
    if (valid) {
      axios.post("/user/login", ruleForm.user).then((res) => {
        console.log(res.data.data);
        if (res.data.data == null) {
          return ElMessage.error("用户名或密码错误");
        } else {
          const user = res.data.data;
          localStorage.setItem("user", user.status);
          localStorage.setItem("username", user.name);
          localStorage.setItem("userId", user.id);
          if (user.status == 1) {
            localStorage.setItem("activeIndex", "user");
            router.push({
              path: "/user",
            });
          } else {
            localStorage.setItem("activeIndex", "voteFront");
            router.push({
              path: "/voteFront",
            });
          }
        }
      });
    }else{
      ElMessage.error("数据请填写完整")
    }
  });
};
</script>
<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.3));
}

.form-box {
  margin: 0 auto;
  padding-top: 250px;
  width: 500px;
  height: 300px;
}

.form-title {
  margin-bottom: 40px;
  margin-left: 100px;
  text-align: center;
  font-size: 30px;
}

.button {
  margin-left: 100px;
}
</style>
